﻿// The icon view is a grid of icons
define([
    'Wjs/ui/elements/View',
    'Wjs/ui/elements/mixins/MultipleContainer',
   'Wjs/ui/elements/mixins/SelectorHolder',
    'Wjs/ui/elements/mixins/Selectable',
    'Wjs/ui/elements/mixins/SingleContainer'
],
function () {
    'use strict';

    var View = Wjs.getType('View'),
        MultipleContainer = Wjs.getType('MultipleContainer'),
        SelectorHolder = Wjs.getType('SelectorHolder'),
        Selectable = Wjs.getType('Selectable'),
        SingleContainer = Wjs.getType('SingleContainer'),
        IconViewItem,
        IconView;

    IconView = Wjs.defineOnce({

        internal: {

            base: View,

            mixins: [
                SelectorHolder,
                MultipleContainer
            ],

            onBeforeTypeDefined: function () {

                // Create the item type
                IconViewItem = Wjs.define({

                    type: 'IconViewItem',

                    internal: {

                        base: View,

                        mixins: [
                            SingleContainer,
                            Selectable
                        ],

                        construct: function (conf, parent) {
                            var me = this;

                            IconViewItem.base.constructor.call(me, conf, parent);

                            me.onDblClick = conf.onDblClick;

                            me.addEvents({
                                dblclick: function (evt) {
                                    if (me.onDblClick) {
                                        me.onDblClick.call(me, evt);
                                    }
                                }
                            });

                            me.keyUpHandler = conf.keyUpHandler;
                        }

                    },

                    tag: 'li',

                    'class': 'wjs-icon-view-item',

                    defaultChildType: 'View'
                });

            }
        },

        'class': 'wjs-icon-view',

        type: 'IconView',

        defaultChildType: 'IconViewItem',

        // Set up the notification when an enter key is pressed
        listenOnKeyUp: true,

        keyUpHandler: function (evt) {
            var me = this,
                item = me.selector.selection;

            if (item && item.keyUpHandler) {
                item.keyUpHandler(evt);
            }
        }

    });

    return IconView;
});